<template>
  <div id="app">
    <!-- <transition name="fade" mode="out-in">
      <keep-alive >
        <router-view v-if="$route.meta.keepAlive" @showTabMenu="showTabMenu" class="main-view"></router-view>
      </keep-alive>
    </transition>

    <transition name="fade" mode="out-in">
      <router-view v-if="!$route.meta.keepAlive" @showTabMenu="showTabMenu" class="main-view"></router-view>
    </transition> -->

    <transition name="fade" mode="out-in">
      <router-view @showTabMenu="showTabMenu" class="main-view"></router-view>
    </transition>
    <!-- 底部菜单 -->
    <TabMenu v-if="isShowTab"></TabMenu>
  </div>
</template>

<script>
import TabMenu from 'components/tabMenu'
import { mapActions, mapGetters } from 'vuex'
import * as Api from 'api'
const eruda = require('static/eruda.min.js')

export default {
  name: 'App',
  components: {
    TabMenu
  },
  data() {
    return {
      isShowTab: true
    }
  },
  computed: {
    ...mapGetters(['user', 'token']),
  },
  created() {
    // 调试工具
    let showEruda = window.location.search.indexOf('eruda') > -1
    if (process.env.NODE_ENV !== 'production' || showEruda) {
      eruda.init()
    }
    this.GetWebinfo()
    // 有token,没有user时才请求用户信息
    if (this.token) {
      this.GetUserInfo()
    }
  },
  methods: {
    ...mapActions(['GetUserInfo', 'GetWebinfo']),
    // async getWebinfo() {
    //   const res = await Api.WebInfo()
    //   if (res.data) {
    //     this.SetWebinfo(res.data)
    //   }
    // },
    showTabMenu(status) {
      this.isShowTab = status
    }
  }
}
</script>

<style lang="less">
@import 'assets/styles/app.less';

#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  font-size: 16px;
}
// .main-view{
//   padding-bottom: 50px;
// }

</style>
